<template>
	<div class="Word">
		<div class="container">
			<div class="left">
				<h5>待添加区域：</h5>
				<input type="text" id="inputKey1" oninput="loadData();" placeholder="请输入数据区域关键字搜索" />
				<div class="tbcontainer">
					<table id="bkmkTable">
						<thead>
							<tr>
								<th>数据区域</th>
								<th>显示文字</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<!-- 大量的数据行 -->
							<!--<tr>-->
							<!--<td>AAA</td>-->
							<!--<td>BBB</td>-->
							<!--<td><button class="normal-button">添加</button></td>-->
							<!--</tr>-->

						</tbody>
					</table>
				</div>
			</div>
			<div class="right">
				<h5>已添加区域：</h5>
				<input type="text" id="inputKey2" oninput="loadData();" placeholder="请输入数据区域关键字搜索" />
				<div class="tbcontainer">
					<table id="bkmkTable2">
						<thead>
							<tr>
								<th>数据区域</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<!-- 大量的数据行 -->
							<!--<tr>-->
							<!--<td>AAA</td>-->
							<!--<td>BBB</td>-->
							<!--<td><button class="delete-button">删除</button> <button class="normal-button">定位</button></td>-->
							<!--</tr>-->

						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</template>
<style>
/* body {
	font-family: Arial, sans-serif;
	font-size:10px;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	background-color: #f5f5f5;
} */

.container {
	display: flex;
	width: 99%;
	max-width: 100%;
}

.left,
.right {
	background-color: #fff;
	padding: 0 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.left {
	flex-grow: 7;
}

.right {
	flex-grow: 3;
}

h5 {
	margin-bottom: 10px;
}

input[type="text"],
textarea {
	width: 90%;
	padding: 10px;
	margin-bottom: 15px;
	border-radius: 5px;
	border: 1px solid #ccc;
}

/* 表格样式 */
table {
	border-collapse: collapse;
	width: 100%;
}

th,
td {
	padding: 8px;
	text-align: left;
	border-bottom: 1px solid #ddd;
}

th {
	position: sticky;
	top: 0;
	background-color: #f2f2f2;
	z-index: 1;
}

/* 容器样式 */
.tbcontainer {
	height: 300px;
	overflow: auto;
	border: solid 1px #ccc;
	scrollbar-width: thin;
	scrollbar-color: #888 #f2f2f2;
}

/* 滚动条样式 */
.tbcontainer::-webkit-scrollbar {
	width: 8px;
}

.tbcontainer::-webkit-scrollbar-track {
	background: #f2f2f2;
}

.tbcontainer::-webkit-scrollbar-thumb {
	background-color: #888;
	border-radius: 4px;
}

.tbcontainer::-webkit-scrollbar-thumb:hover {
	background-color: #555;
}

.delete-button {
	padding: 3px 3px;
	border: none;
	border-radius: 3px;
	background-color: #f44336;
	color: white;
	font-size: 10px;
	cursor: pointer;
}

.delete-button:hover {
	background-color: #d32f2f;
}

.normal-button {
	padding: 3px 3px;
	border: none;
	border-radius: 3px;
	background-color: #4E7EFF;
	color: white;
	font-size: 10px;
	cursor: pointer;
}

.normal-button:hover {
	background-color: #4E6EF2;
}

.locate-button {
	padding: 3px 3px;
	border: none;
	border-radius: 3px;
	background-color: #0abb87;
	color: white;
	font-size: 10px;
	cursor: pointer;
}

.locate-button:hover {
	background-color: #0a9966;
}
</style>
<script>
let definedDataRegionJson = window.external.UserParams;
alert(definedDataRegionJson);


export default {
	name: 'Word',
	data() {
		return {
		}
	},
	methods: {
		//加载数据
		loadData() {
			var kWord1 = document.getElementById("inputKey1").value;
			var kWord2 = document.getElementById("inputKey2").value;

			var dataRegionJson = pageofficectrl.word.DataRegionsAsJson;
			searchDataRegion(definedDataRegionJson, dataRegionJson, kWord1);
			searchDataRegion2(dataRegionJson, kWord2);
		},

		//加载待添加区域列表
		searchDataRegion(drDefinedJson, drJson, s) {
			var tb1 = document.getElementById("bkmkTable");
			var rCount = tb1.rows.length;
			for (var i = 1; i < rCount; i++) {
				tb1.deleteRow(1);
			}

			if ('' == drDefinedJson) drDefinedJson = '[]';
			var definedDataRegionObj = JSON.parse(drDefinedJson);
			var dataRegionsJson = drJson;
			if ('' == dataRegionsJson) dataRegionsJson = '[]';
			var dataRegionsObj = JSON.parse(dataRegionsJson);

			var oTable = document.getElementById("bkmkTable");
			var tbodyObj = oTable.tBodies[0];
			for (let key in definedDataRegionObj) {
				let drName = definedDataRegionObj[key].name;
				let drCaption = definedDataRegionObj[key].caption;
				//alert("数据区域："+drName+"; 值："+drValue);

				let bFind = false;
				for (let k in dataRegionsObj) {
					if (dataRegionsObj[k].name == drName) {
						bFind = true;
						break;
					}
				}

				if (bFind) continue;

				if (drName.toLocaleLowerCase().indexOf(s.toLocaleLowerCase()) > -1) {
					var oTr = tbodyObj.insertRow();
					var oTd = oTr.insertCell();
					oTd.innerHTML = drName;
					oTd = oTr.insertCell();
					oTd.innerHTML = drCaption;
					oTd = oTr.insertCell();
					oTd.innerHTML = '<button class="normal-button" onclick="addDataRegion(\'' + drName + '\',\'' + drCaption + '\');loadData();">添加</button>';
				}
			}
		},

		//加载已添加区域列表
		searchDataRegion2(drJson, s) {
			//删除所有行
			var tb1 = document.getElementById("bkmkTable2");
			var rCount = tb1.rows.length;
			for (var i = 1; i < rCount; i++) {
				tb1.deleteRow(1);
			}

			let dataRegionsJson = drJson;
			if ('' == dataRegionsJson) dataRegionsJson = '[]';
			let dataRegionsObj = JSON.parse(dataRegionsJson);
			var oTable = document.getElementById("bkmkTable2");
			var tbodyObj = oTable.tBodies[0];
			for (let key in dataRegionsObj) {
				let drName = dataRegionsObj[key].name;

				if (drName.toLocaleLowerCase().indexOf(s.toLocaleLowerCase()) > -1) {
					var oTr = tbodyObj.insertRow();
					var oTd = oTr.insertCell();
					oTd.innerHTML = drName;
					oTd = oTr.insertCell();
					oTd.innerHTML = '<button class="delete-button" onclick="deleteDataRegion(\'' + drName + '\');loadData();">删除</button> <button class="locate-button" onclick="locateDataRegion(\'' + drName + '\');">定位</button>';
				}
			}

		},

		locateDataRegion(drName) {
			pageofficectrl.word.LocateDataRegion(drName);
		},

		deleteDataRegion(drName) {
			pageofficectrl.word.DeleteDataRegion(drName);
		},

		addDataRegion(drName, drValue) {
			pageofficectrl.word.AddDataRegion(drName, drValue);
		},

	},

	mounted: function () {

		// 将vue中的方法赋值给window
		window.loadData = this.loadData;
		window.Save = this.Save;
		window.searchDataRegion = this.searchDataRegion;
		window.searchDataRegion2 = this.searchDataRegion2;
		window.locateDataRegion = this.locateDataRegion;
		window.deleteDataRegion = this.deleteDataRegion;
		window.addDataRegion = this.addDataRegion;

		loadData();
	}
}
</script>

